<template>
  <div class="share-container">
    <vshare ref="vshare" :vshareConfig="vshareConfig"></vshare>
  </div>
</template>

<script>
import vshare from "vshare";
export default {
  name: "Share",
  components: { vshare },
  data() {
    return {
      vshareConfig: {
        shareList: [
          //此处放分享列表ID
          "sqq",
          "qzone",
          "tieba",
          "weixin",
          "copy",
        ],
        common: {
          //此处放置通用设置
          bdText: "", //分享的内容
          bdDesc: "", //分享的摘要
          bdUrl: "$this.$route.path", //分享的Url地址
          bdPic: "", //分享的图片
          bdMini: 2,
          bdMiniList: ["sqq", "qzone", "tieba", "weixin", "copy"],
        },
        share: [
          {
            //此处放置分享按钮设置
            bdSize: 24,
          },
        ],
        slide: {},
        //此处放置浮窗分享设置
        image: {
          //此处放置图片分享设置
          viewList: ["sqq", "qzone", "tieba", "weixin", "copy"],
          viewText: "分享到：",
          viewSize: "16",
        },
        selectShare: [
          //此处放置划词分享设置
        ],
      },
    };
  },
  beforeCreate() {
    /*
 这里是初次进入页面时把vshare里的一个参数置空，但vshare会报错，不影响使用
 */
    window._bd_share_main = "";
  },
  methods: {
    //显示分享按钮
    vshareClick(index) {
      if (this.vsharShow == index) {
        this.vsharShow = -1;
        /*
        把百度分享的一个参数置空
        这里是每次我销毁分享按钮是把vshare里的这个参数制空，这样就可以了
        */
        window._bd_share_main = "";
      } else {
        this.vsharShow = index;
      }
    },
  },
  beforeDestroy() {
    let slide = document.querySelectorAll(".bdshare-slide-button-box");
    if (slide.length == 1) {
      slide[0].style.display = "none";
    } else if (slide.length != 1) {
      slide[slide.length - 1].style.display = "none";
    }
  },
};
</script>

<style>
/* 分享容器 */
.share-container {
  padding-left: 5rem;
  margin-bottom: 1rem;
}
</style>
